<template>
    <div class="checkbox-group">
        <input 
            type="checkbox"
            v-for="i in total"
            :key="i"
            :checked="selectedIndexes.includes(i - 1)"
            @change="(e) => onChange(e.target.checked, i - 1)"
        />
    </div>
</template>

<script>
export default {
    props: {
        selectedIndexes: Array,
        total: Number,
    },
    emits: ['update:selectedIndexes'],
    methods: {
        onChange (checked, idx) {
            let newList;
            if (!checked) {
                newList = this.selectedIndexes.concat();
                const index = newList.findIndex(item => item === idx);
                newList.splice(index, 1);
            } else {
                newList = this.selectedIndexes.concat(idx);
            }
            this.$emit('update:selectedIndexes', newList)
        },
    },
}
</script>